<template>
  <div>
    <el-dialog
      :title="authorRoleTitle"
      :visible.sync="dialogVisibleAuthorRole"
      :close-on-click-modal="false"
      width="40%"
      :before-close="handleCloseAuthorRole"
    >
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色列表" prop="type">
          <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选/反选</el-checkbox>
          <div style="margin: 15px 0;" />
          <el-checkbox-group v-model="ruleForm.checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="role in checkBoxRolesArray" :key="role.id" :checked="role.checked" :disabled="role.disabled" :label="role">{{ role.sysRoleName }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="danger" @click="submitFormRolesToUser('ruleForm')">授权角色</el-button>
          <el-button @click="resetFormRolesToUser('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import User from '@/api/axios/api/author/user'
import Tip from '@/utils/tip'
export default {
  name: 'AuthUserRole',
  props: {
    sysUserName: {
      type: String,
      default: ''
    },
    checkBoxRoles: {},
    sysUserUuid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      authorRoleTitle: '',
      dialogVisibleAuthorRole: false,
      checkBoxRolesArray: [],
      checkAll: false,
      sysUserUuidStr: '',
      isIndeterminate: true,
      ruleForm: {
        checkedCities: []
      },
      rules: {
      }
    }
  },
  watch: {
    checkBoxRoles: {
      deep: true,
      immediate: false,
      handler() {
        this.checkBoxRolesArray = []
        this.ruleForm.checkedCities = []
        this.authorRoleTitle = '正在为用户: ' + this.sysUserName + ' 授权角色'
        this.checkBoxRolesArray = this.checkBoxRoles.data
        this.sysUserUuidStr = this.sysUserUuid
        this.dialogVisibleAuthorRole = true
      }
    }
  },
  methods: {
    handleCloseAuthorRole() {
      this.checkBoxRolesArray = []
      this.ruleForm.checkedCities = []
      this.dialogVisibleAuthorRole = false
    },
    handleCheckAllChange(val) {
      this.ruleForm.checkedCities = val ? this.checkBoxRolesArray : []
      this.isIndeterminate = false
    },
    handleCheckedCitiesChange(value) {
      const checkedCount = value.length
      this.checkAll = checkedCount === this.checkBoxRolesArray.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.checkBoxRolesArray.length
    },
    submitFormRolesToUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const rolesToUser = {}
          rolesToUser.userUuid = this.sysUserUuidStr
          const rolesArray = this.ruleForm.checkedCities
          const roles = []
          if (rolesArray && rolesArray.length > 0) {
            rolesArray.forEach(value => {
              roles.push(value.id)
            })
          }
          rolesToUser.roles = roles
          User.rolesToUser(rolesToUser).then(res => {
            Tip.success(res.data)
            setTimeout(() => {
              this.checkBoxRolesArray = []
              this.ruleForm.checkedCities = []
              this.dialogVisibleAuthorRole = false
            }, 2000)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetFormRolesToUser(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>

</style>
